<template>
    <div id='temp'>
        <el-row>
            <el-col :span="10">
                <div>
                <div class="import">
                        <img src="../../img/train.jpg" class="img"/>
                        <el-upload class="upload-demo" ref="upload" :action="fileAction" :on-change="fileUploadChange"
                                   :file-list="fileList2" :auto-upload="false" :on-success="fileUploadSuccess"
                                   :on-remove="fileRemove">
                            <el-button type="primary" slot="trigger" @click="fileList2=[]">选择文件</el-button>
                            <el-button type="success" @click="submitfiles" :disabled="subDisabled">批量导入</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传Excel文件,格式如上图!</div>
                        </el-upload>
                    </div>
                    <el-form ref="form" :model="form" label-width="150px" class="demo-dynamic" :rules="formRules">
                        <el-form-item label="课程代码" ref="form" prop="courseid">
                            <el-col :span="16">
                                <el-select v-model="form.courseid" placeholder="请选择" clearable filterable  multiple collapse-tags>
                                    <el-option v-for="item in courseCode" :key="item.id" :label="item.code"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="语言代码" prop="language">
                            <el-col :span="16">
                                <el-select v-model="form.language" placeholder="请选择">
                                    <el-option v-for="item in languageCode" :key="item" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="形式代码" prop="type">
                            <el-col :span="16">
                                <el-select v-model="form.type" placeholder="请选择" @change="clearEditor">
                                    <el-option v-for="(item,index) in formCode" :key="index" :label="item"
                                               :value="item">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="章代码" prop="chapter">
                            <el-col :span="16">
                                <el-input style="max-width:217px" v-model="form.chapter" auto-complete="off"
                                          placeholder="请输入00-99"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="节代码" prop="section">
                            <el-col :span="16">
                                <el-input style="max-width:217px" v-model="form.section" auto-complete="off"
                                          placeholder="请输入00-99"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="难度代码" prop="difficulty">
                            <el-col :span="16">
                                <el-select v-model="form.difficulty" placeholder="请选择">
                                    <el-option v-for="(item,index) in difficultyCode" :key="index" :label="item"
                                               :value="item">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                          <el-form-item label="科目代码" prop="subject">
                            <el-col :span="16">
                                <el-input style="max-width:217px" v-model="form.subject" auto-complete="off"
                                          placeholder="请输入00-99"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="关键字代码" ref="form" prop="keywordCode">
                            <el-col :span="16">
                                <el-select v-model="form.keywordCode" placeholder="请选择" clearable filterable  multiple collapse-tags>
                                    <el-option v-for="item in keyCode" :key="item.id" :label="item.code"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="顺序代码" prop="sequence">
                            <el-col :span="16">
                                <el-input style="max-width:217px" v-model="form.sequence" auto-complete="off"
                                          placeholder="请输入001-999"></el-input>
                            </el-col>
                        </el-form-item>
                    </el-form>
                    
                </div>
            </el-col>
            <el-col :span="14">
                <div v-show="form.type==1">
                    <el-form>
                        <el-form-item label="题干" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.questionStem" :rows="5"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem1"></div>
                        </el-form-item>
                        <el-form-item label="选项A" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.optionA" :rows="3"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem2"></div>
                        </el-form-item>
                        <el-form-item label="选项B" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.optionB" :rows="3"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem3"></div>
                        </el-form-item>
                        <el-form-item label="选项C" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.optionC" :rows="3"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem4"></div>
                        </el-form-item>
                        <el-form-item label="选项D" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.optionD" :rows="3"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem5"></div>
                        </el-form-item>
                        <el-form-item label="参考答案" label-width="80px">
                            <el-radio-group v-model="answer">
                                <el-radio label="A"></el-radio>
                                <el-radio label="B"></el-radio>
                                <el-radio label="C"></el-radio>
                                <el-radio label="D"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-show="form.type==2">
                    <el-form>
                        <el-form-item label="题干" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.questionStem" :rows="5"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem6"></div>
                        </el-form-item>
                        <el-form-item label="参考答案" label-width="80px">
                            <el-radio-group v-model="answer">
                                <el-radio label="T">对</el-radio>
                                <el-radio label="F">错</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-show="form.type==3">
                    <el-form>
                        <el-form-item label="题干" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.questionStem" :rows="5"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem7"></div>
                        </el-form-item>
                        <el-form-item label="参考答案" label-width="80px">
                            <!-- <el-input type="textarea" v-model="form.questionStem" :rows="5"></el-input>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList">
                              <el-button size="mini" type="primary">上传文件</el-button>
                            </el-upload> -->
                            <div id="editorElem8"></div>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-show="form.type==4">
                    <el-form>
                        <el-form-item label="题干" label-width="80px">
                            <div id="editorElem9"></div>
                        </el-form-item>
                        <el-form-item label="参考答案" label-width="80px">
                            <div id="editorElem10"></div>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <div class="button-wrapper">
            <el-button type="primary" @click="onSubmit()">提交</el-button>
        </div>
    </div>
</template>
<script>
    import Editor from "wangeditor";

    export default {
        data() {
            return {
                form: {
                    courseid: [],
                    language: "",
                    type: "",
                    chapter: "",
                    section: "",
                    difficulty: "",
                    sequence: "",
                    subject:'',
                    keywordCode:[]
                },
                formRules: {
                    courseid: [
                        {
                            type: "array",
                            required: true,
                            message: "请选择课程代码",
                            trigger: "change"
                        }
                    ],
                     keywordCode: [
                        {
                            type: "array",
                            required: true,
                            message: "请选择关键字代码",
                            trigger: "change"
                        }
                    ],
                    language: [
                        {
                             type: "number",
                            required: true,
                            message: "请选择语言代码",
                            trigger: "change"
                        }
                    ],
                    type: [
                        {
                            type: "number",
                            required: true,
                            message: "请选择形式代码",
                            trigger: "change"
                        }
                    ],
                    chapter: [
                        {required: true, message: "请输入章代码00-99", trigger: "blur"},
                        {min: 2, max: 2, message: "长度必须为2个字符", trigger: "blur"}
                    ],
                    section: [
                        {required: true, message: "请输入节代码00-99", trigger: "blur"},
                        {min: 2, max: 2, message: "长度必须为2个字符", trigger: "blur"}
                    ],
                    difficulty: [
                        {
                            type: "number",
                            required: true,
                            message: "请选择难度代码",
                            trigger: "change"
                        }
                    ],
                     subject: [
                        {required: true, message: "请输入科目代码00-99", trigger: "blur"},
                        {min: 2, max: 2, message: "长度必须为2个字符", trigger: "blur"}
                    ],
                    sequence: [
                        {required: true, message: "请输入顺序代码001-999", trigger: "blur"},
                        {min:3, max: 3, message: "长度必须为3个字符", trigger: "blur"}
                    ]
                },
                courseCode: [],
                languageCode: [
                    {
                        label:'English',
                        value:1,
                    },
                    {
                        label:'Chinese',
                        value:2,
                    }
                ],
                formCode: [1, 2, 3],
                chapterCode: [],
                sectionCode: [],
                keyCode:[{
                    code:'00',
                    id:'00',
                },
                {
                    code:'01',
                    id:'01',
                }],
                difficultyCode: [1, 2, 3],
                orderCode: [1, 2, 3],
                // fileList: [],
                answer: "",
                editor: {},
                // 上传图片相关
                fileList2: [],
                fileAction: PATH + 'Train/trainImport',
                subDisabled: true,
            };
        },
        methods: {
            // handleRemove(file, fileList) {
            //   console.log(file, fileList);
            // },
            // handlePreview(file) {
            //   console.log(file);
            // },
            clearEditor() {
                for (var k in this.editor) {
                    this.editor[k].txt.clear();
                }
            },
            onSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let data = _g.cloneJson(this.form);
                        if (this.form.type == 1) {
                            data.question = this.editor.editor1.txt.html();
                            data.a = this.editor.editor2.txt.html();
                            data.b = this.editor.editor3.txt.html();
                            data.c = this.editor.editor4.txt.html();
                            data.d = this.editor.editor5.txt.html();
                            data.answer = this.answer;
                        } else if (this.form.type == 2) {
                            data.question = this.editor.editor6.txt.html();
                            data.answer = this.answer;
                        } else if (this.form.type == 3) {
                            data.question = this.editor.editor7.txt.html();
                            data.answer = this.editor.editor8.txt.html();
                        } else if (this.form.type == 4) {
                            data.question = this.editor.editor9.txt.html();
                            data.answer = this.editor.editor10.txt.html();
                        }
                        this.apiPost("Train/questionAdd", data).then(res => {
                            if (res.error) {
                                this.$message.error(res.msg);
                            } else {
                                this.$message({message: res.msg, type: "success"});
                                Lockr.rm("questionSearch");
                                Lockr.set("questionSearch", {
                                    courseid: "",
                                    language: "",
                                    type: "",
                                    chapter: "",
                                    section: "",
                                    difficulty: "",
                                    subject:'',
                                    sequence: "",
                                    keywordCode:'',
                                });
                                router.push("/question/list");
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 上传相关 start
            fileUploadChange(file, fileList) {
                if (fileList.length > 1) {
                    _g.toastMsg('warning', '每次限上传一个文件')
                }
                this.subDisabled = fileList.length !== 1;
            },
            fileRemove(file, fileList) {
                this.subDisabled = fileList.length !== 1;
            },
            fileUploadSuccess(res) {
                _g.closeGlobalLoading();
                let remind = res.error ? 'error' : 'success';
                _g.toastMsg(remind, res.msg);
                if (!res.error) {
                    this.fileList2 = [];
                    setTimeout(() => {
                        this.subDisabled = true;
                    }, 0);
                } else {
                    this.fileList2 = [];
                    setTimeout(() => {
                        this.subDisabled = true;
                    }, 0);
                }
            },
            submitfiles() {
                this.$refs.upload.submit();
            },
            // 上传相关 end
        },
        created() {
            this.apiPost("System/courseCodeLists").then(res => {
                this.courseCode = res;
            });
        },
        mounted() {
            // 富文本编辑框
            for (var i = 1; i < 11; i++) {
                this.editor["editor" + i] = new Editor("#editorElem" + i);
                this.editor["editor" + i].customConfig.uploadImgServer =
                    PATH + "System/upload";
                this.editor["editor" + i].customConfig.uploadFileName = "file[]";
                this.editor["editor" + i].customConfig.customAlert = function (info) {
                    this.$message.error("图片上传失败！");
                };
                this.editor["editor" + i].create();
                this.editor["editor" + i].$textContainerElem[0].style.height = "152px";
            }
        }
    };
</script>
<style lang="css" scoped>
    #temp {
        padding: 30px;
    }

    .el-textarea {
        max-width: 450px;
    }

    .button-wrapper {
        padding: 30px 80px;
    }
    .img-wrapper {
        display: inline-block;
        height: 26px;
        line-height: 26px;
    }
/*
    .img-wrapper img {
        vertical-align: middle;
        padding-left: 10px;
        width: 16px;
        height: 16px;
    }*/

    .import {
        width: 100%;
        height: 100%;
    }

    .img {
        width: 95%;
        margin: 0 5% 0 0;

    }

    .upload-demo {
        margin: 5% auto;
    }
</style>
